<meta charset="utf-8"/>
<style type="text/css">
  .welcome-container{
    height:calc(100vh - 176px);
    width:100%;
    display:flex;
    flex-direction:column;
    padding:12px;
    padding-bottom:0;
  }
  .container-row{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:12px;
  }
  .container-card{
    padding:10px;
    width:670px;
    height:282px;
    border-radius:10px;
    -moz-box-shadow:2px 2px 5px #c1bdbd;
    -webkit-box-shadow:2px 2px 5px #c1bdbd;
    box-shadow:2px 2px 5px #c1bdbd;
  }
</style>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div class="welcome-container">
          <div class="container-row">
            <div class="container-card">
              <div style="width:100%;font-size:16px;height:26px;line-height:26px;display:flex;justify-content:space-between;">
                <div>修改密码</div>
                <div title="先绑定微信后可使用微信登录"><button class="btn btn-link" style="font-size:16px;outline:none;text-decoration:none;" onclick="thisPage.bindingWechat()">微信登录</button></div>
              </div>
              <form class="form-horizontal" role="form">
                <div class="space-4"></div>
                <div class="space-4"></div>
                <div class="space-4"></div>
                <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">原始密码</div></label>
                <div class="col-sm-7">
                  <div class="hr-4"></div>
                  <input type="password" id="original_password" placeholder="当前登录密码" class="form-control" maxlength="20"/>
                </div>
                <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">新的密码</div></label>
                <div class="col-sm-7">
                  <div class="hr-4"></div>
                  <input type="password" id="new_password" placeholder="输入新的密码" class="form-control" maxlength="20"/>
                </div>
                <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">确认密码</div></label>
                <div class="col-sm-7">
                  <div class="hr-4"></div>
                  <input type="password" id="verify_password" placeholder="输入确认密码" class="form-control" maxlength="20"/>
                </div>
                <div class="col-xs-12" style="margin-top:20px;">
                  <div style="align-items:center;justify-content:center;display:flex;"><button type="button" id="btn_submit" class="btn btn-white" style="width:433px;margin-left:-7px;">保存</button></div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function($){
    var urlRoute = '/profile/';/*请求controller层的url*/
    var editPassword = urlRoute + 'editPassword';/*修改密码*/
    var editPersionInfo = urlRoute + 'editPersionInfo';/*修改个人信息*/
    thisPage = {
      init : function(){
        thisPage.initEvent();
      },
      initEvent : function(){
        $('#btn_submit').on('click',function(){
          thisPage.btnSubmit();
        });
      },
      btnSubmit : function(){
        if(verifyFn.inputEmpty('#original_password')) return;
        if(verifyFn.inputEmpty('#new_password')) return;
        if(verifyFn.inputEmpty('#verify_password')) return;
        var original_password = winFn.getDomValue('#original_password');
        var new_password = winFn.getDomValue('#new_password');
        var verify_password = winFn.getDomValue('#verify_password');
        if(new_password != verify_password){
          layerFn.alertCallback('输入的两次密码不一致',function(){
            $('#verify_password').focus();
          });
          return;
        }
        if(original_password == verify_password){
          layerFn.alertCallback('原始密码和新密码相同',function(){
            $('#new_password').focus();
          });
          return;
        }
        var params = {
          original_password : original_password,
          new_password : new_password,
          verify_password : verify_password
        };
        layerFn.submit(editPassword,params,function(data){
          winFn.setDomValue('#original_password','');
          winFn.setDomValue('#new_password','');
          winFn.setDomValue('#verify_password','');
          layerFn.alert(data.msg,data.code);
        });
      },
      bindingWechat : function(){
        //参考发改委的项目 sso-frontend/src/main/resources/static/profile.html
      }
    }
    thisPage.init();
  });
</script>